<template>
    <div class="container" :style="'min-height: '+$docHeight+'px'">
        <div v-if="showCont&&!showTimeOut">
            <div class="bannerCont">
                <div class="bannerLeft">
                    <div class="bannerName">创建就诊卡</div>
                    <div class="bannerMain">
                        <div class="bannerDesItem">就诊档案</div>
                        <div class="bannerDesItem">更便捷预约挂号</div>
                    </div>
                </div>
                <img class="bannerImg" src="/img/book2.png" />
            </div>
            <div class="formCont">
                <div class="formTitle">
                    <div>新建就诊卡信息</div>
                </div>
                <div class="formInput">
                    <div class="inputName">就诊姓名</div>
                    <input v-model="carData.userName" type="text" maxlength="5" placeholder="请输入就诊人姓名" />
                </div>
                <div class="formInput">
                    <div class="inputName">就诊性别</div>
                    <div class="inputOut">
                        <div class="inputMask" @click="sexShow = true"></div>
                        <input v-model="carData.userSex" placeholder="请选择就诊性人性别" />
                    </div>
                    <div @click="sexShow = true" class="iconfont icon-xiala"></div>
                </div>
                <div class="formInput">
                    <div class="inputName">就诊关系</div>
                    <div class="inputOut">
                        <div class="inputMask" @click="typeShow = true"></div>
                        <input v-model="carData.userType" placeholder="请选择就诊性人关系" />
                    </div>
                    <div @click="typeShow = true" class="iconfont icon-xiala"></div>
                </div>
                <div class="formInput">
                    <div class="inputName">联系号码</div>
                    <input v-model="carData.phone" type="text" maxlength="11" placeholder="请输入就诊联系号码" />
                </div>
                <div class="formInput">
                    <div class="inputName">出生日期</div>
                    <div class="inputOut">
                        <div class="inputMask" @click="dateShow = true"></div>
                        <input v-model="carData.date" placeholder="请选择就诊人出生日期" />
                    </div>
                    <div @click="dateShow = true" class="iconfont icon-xiala"></div>
                </div>
                <div class="saveBtn" @click="serchFn">
                    <span>确认添加就诊卡</span>
                </div>
            </div>
        </div>
        <van-popup :close-on-click-overlay="false" v-model:show="sexShow" round position="bottom">
            <div class="maskCont">
                <div class="maskHead">请选择就诊人性别</div>
                <div class="maskCheck">
                    <div @click="sexFn(item)" :class="item.id==sexId?'maskCheckItemActive maskCheckItem':'maskCheckItem'" :key="index" v-for="(item,index) in sexArr">{{ item.name }}</div>
                </div>
                <div class="maskBtn" @click="sexSureFn">确认选择</div>
            </div>
        </van-popup>
        <van-popup :close-on-click-overlay="false" v-model:show="typeShow" round position="bottom">
            <div class="maskCont">
                <div class="maskHead">请选择就诊人性别</div>
                <div class="maskCheck">
                    <div @click="typeFn(item)" :class="item.id==typeId?'maskCheckItemActive maskCheckItem':'maskCheckItem'" :key="index" v-for="(item,index) in typeArr">{{ item.name }}</div>
                </div>
                <div class="maskBtn" @click="typeSureFn">确认选择</div>
            </div>
        </van-popup>
        <van-popup :close-on-click-overlay="false" v-model:show="dateShow" round position="bottom">
            <div class="maskCont">
                <div class="maskHead">请选择就诊人出生日期</div>
                <van-date-picker
                :show-toolbar="false"
                v-model="currentDate"
                title="选择日期"
                :min-date="minDate"
                :max-date="maxDate"
                />
                <div class="maskBtn" @click="dateSureFn">确认选择</div>
            </div>
        </van-popup>
    </div>
</template>
<script>
    export default {
        components: {},
        name:'',
        data() {
            return {
                showTimeOut: false,
                showCont:false,
                sexShow:false,
                dateShow:false,
                typeShow:false,
                minDate: new Date(1925, 0, 1),
                maxDate: new Date(2025, 11, 31),
                currentDate:['2021', '01', '01'],
                carData:{
                    userName:'',
                    userSex:'',
                    userType:'',
                    phone:'',
                    date:'',
                },
                sexId:0,
                sexArr:[
                    {name:'男生',id:0},
                    {name:'女生',id:1},
                ],
                typeId:0,
                typeArr:[
                    {name:'本人',id:0},
                    {name:'女生',id:1},
                ],
            }
        },
        props: {},
        setup(){},
        methods:{
            sexFn(item){
                this.carData.userSex = item.name
                this.sexId = item.id
            },
            sexSureFn(){
                if(this.carData.userSex==''){
                    this.carData.userSex = this.sexArr[0].name
                }
                this.sexShow = false
            },
            typeFn(item){
                this.carData.userType = item.name
                this.typeId = item.id
            },
            typeSureFn(){
                if(this.carData.userType==''){
                    this.carData.userType = this.typeArr[0].name
                }
                this.typeShow = false
            },
            dateSureFn(){
                this.carData.date = this.currentDate.join('-')
                this.dateShow = false
            },
        },
        mounted(){},
        created() {
            this.showCont = true
        },
    }
</script>
<style scoped lang="less">
.container{
    box-sizing: border-box;
    padding-bottom: 1.25rem;
    background-color: #ebf9f3;
    .bannerCont{
        width: 100%;
        // height: 20rem;
        background-image: linear-gradient(to bottom, #5cc78e,#ebf9f3);
        color: #fff;
        display: flex;
        justify-content: space-between;
        padding: 2rem 4% 0rem;
        box-sizing: border-box;
        .bannerImg{
            flex: 1;
            width: 1rem;
            position: relative;
            top: -1rem;
        }
        .bannerLeft{
            width: 12rem;
            position: relative;
            .bannerName{
                font-size: 1.2rem;
                font-weight: bold;
                position: relative;
                top: -0.7rem;
            }
            .bannerLeftImg{
                width: 4rem;
            }
            .bannerMain{
                position: relative;
                font-size: 0.7rem;
                .bannerDesItem{
                    margin-bottom: 0.25rem;
                }
            }
        }
    }
    .formCont{
      background-color: #fff;
      width: 92%;
      margin: 0 auto;
      position: relative;
    //   top: -4rem;
      padding: 1rem 4%;
    //   margin-top: -1rem;
      border-radius: 0.75rem;
      box-sizing: border-box;
      .signImg{
        position: absolute;
        width: 4rem;
        top: 0.5rem;
        right: 0.5rem;
        transform: rotate(40deg);
      }
      .formTitle{
          font-size: 0.9rem;
          font-weight: bold;
          margin-bottom: 1rem;
          text-align: center;
        //   font-family: cursive;
          .iconfont{
              color: #5cc78e;
              font-size: 1rem;
              margin-right: 0.25rem;
              position: relative;
              top: 0.05rem;
          }
      }
      .formStep{
        font-size: 0.75rem;
        font-weight:bold;
        display: flex;
        padding: 0.75rem 0;
        justify-content: space-between;
        align-items: center;
        .ctrlBtn{
            font-weight: normal;
            font-size: 0.65rem;
            text-decoration: underline;
        }
      }
      .formInput{
            display: flex;
            padding: 0.75rem 1rem;
            box-sizing: border-box;
            align-items: center;
            width: 100%;
            background-color: #f6f7f9;
            margin-bottom: 1rem;
            border-radius: 1.5rem;
            .inputName{
                width: 4rem;
            }
            .formFlexCont{
                display: flex;
                align-items: center;
                .formRadio{
                    margin-right: 0.75rem;
                }
            }
            .icon-xiala{
                width: 1.5rem;
                font-size: 1.2rem;
                color: #ccc;
                text-align: center;
            }
            .inputOut{
                flex: 1;
                width: 3rem;
                position: relative;
                .inputMask{
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    left: 0;
                    top: 0;
                }
                input{
                    width: 90%;
                    border: none;
                    background:none;
                    outline:none;
                }
            }
            input{
                flex: 1;
                // width: 90%;
                border: none;
                background:none;
                outline:none;
            }
        }
      .saveBtn{
          width: 100%;
          padding: 0.75rem 0;
          text-align: center;
          background-image: linear-gradient(to right, #8ee3be,#5cc78e);
          color: #fff;
        //   font-size: 0.8rem;
          border-radius: 2rem;
        //   font-family: cursive;
      }
  }
  .maskCont{
        padding: 1.5rem 4%;
        box-sizing: border-box;
        .signCont{
            // border: 1px dashed #999;
            // height: 13rem;
            display: flex;
            justify-content: center;
        }
        .cavasTip{
            font-size: 0.6rem;
            margin-top: 0.5rem;
            text-align: center;
            color: #666;
        }
        .cavasCtrl{
            display: flex;
            justify-content: space-between;
            .maskBtn{
                width: 48%;
                border-radius: 0.25rem;
                // margin-left: 0.75rem;
            }
        }
        .maskHead{
            width: 100%;
            text-align: center;
            font-size: 1rem;
            font-weight: bold;
            margin-bottom: 1.5rem;
        }
        .maskActiveVal{
            margin: 0.25rem 0 2rem;
            font-size: 1rem;
            text-align: center;
            color: #5cc78e;
            
        }
        .maskCheck{
            width: 100%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            .maskCheckItem{
                width: 46%;
                text-align: center;
                background-color: #f6f7f9;
                padding: 0.75rem 0;
                margin-bottom: 0.75rem;
                border-radius: 0.25rem;
            }
            .maskCheckItemActive{
                background-color: #5cc78e;
                color: #fff;
            }
        }
        .sildNum{
            margin: 0.25rem 0 2rem;
            font-size: 1.2rem;
            text-align: center;
            span{
                color: #5cc78e;
            }
        }
        .maskSild{
            width: 90%;
            margin: 0 auto;
            margin-bottom: 3rem;
        }
        .maskWork{
            width: 100%;
            .workInput{
                width: 100%;
                padding: 0.75rem;
                box-sizing: border-box;
                display: flex;
                border-radius:2rem;
                overflow: hidden;
                align-items: center;
                background-color: #f6f7f9;
                input{
                    flex: 1;
                    margin-right: 0.75rem;
                    border: none;
                    outline: none;
                    background: none;
                }
                .clearInput{
                    color: #5cc78e;
                }
            }
            .maskWrokTip{
                width: 100%;
                font-size: 0.9rem;
                margin: 0.75rem 0;
            }
            .maskWorkDes{
                font-size: 0.6rem;
                color: #5cc78e;
                margin-top: 0.75rem;
                text-indent: 0.75rem;
            }
            .workHot{
                display: flex;
                flex-wrap: wrap;
                .hotItem{
                    padding: 0.5rem 1rem;
                    background-color: #f6f7f9;
                    border-radius: 0.25rem;
                    margin-bottom: 0.75rem;
                    margin-right: 0.5rem;
                }
                .hotItemActive{
                    background-color: #5cc78e;
                    color: #fff;
                }
            }
        }
        .maskFlexBtn{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .maskBtn{
                width: 46%;
            }
            .maskBtnDef{
                background: #fff;
                color: #5cc78e;
                border: 1px solid #5cc78e;
                box-sizing: border-box;
            }
        }
        .maskBtn{
            width: 100%;
            text-align: center;
            padding: 0.75rem 0;
            background-color: #5cc78e;
            border: 1px solid #5cc78e;
            color: #fff;
            border-radius: 2rem;
            margin-top: 1.5rem;
        }
        .disMaskBtn{
            opacity: 0.5
        }
    }
}
</style>